<!--本页面由uniapp切片工具生成，uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)，软件下载地址：http://www.ymznkf.com/new_view_669.htm -->
<template>
	<view class="YmContent" :animation="animationData">
		<view class="voucher_center__1">
			<text decode="true" class="voucher_center__47">充值金额</text>
			<view class="voucher_center__48">
				<text decode="true" class="voucher_center__49">￥</text>
				<input class="money" type="number" step="0.01" v-model.number="bill.amount"
					@blur="this.bill.amount = parseFloat(bill.amount.toFixed(2))" />
			</view>
			<radio-group class=" payType">
				<image v-on:click="voucher_center__55_55_click()" src="/static/icon/voucher_center__55_55.jpg"
					mode="scaleToFill" border="0" class="voucher_center__55"></image>
				<text decode="true" class="voucher_center__56">微信</text>
				<radio value="2" class="voucher_center__57" @click="payMethod('2')"> </radio>
				<image v-on:click="voucher_center__58_58_click()" src="/static/icon/voucher_center__58_58.jpg"
					mode="scaleToFill" border="0" class="voucher_center__58"></image>
				<text decode="true" class="voucher_center__59">支付宝</text>
				<radio value="3" class="voucher_center__60" @click="payMethod('3')"> </radio>
			</radio-group>
			<button v-on:click="billSubmitClick()" class="btSubmit">确认充值</button>
			<text decode="true" class="voucher_center__22">充值须知</text>
			<text decode="true" class="voucher_center__23">
				1.目前支持支付宝和微信支付充值,后续增加其他方法会及时公告通知大家。
				2.充值无最低额度限制,请根据发布任务的单价和数量确定充值金额,账号余额可提现,但会收取一定手续费,详情请参考发布规则】和用户协议】
				3.充值提现手续费说明:非会员收取5%,会员收取%
			</text>
		</view>

	</view>
</template>

<script>
	import {
		addUserBill
	} from '@/api/system/wallet.js';

	export default {
		data() {
			return {
				bill: {},
			}
		},

		onLoad() {

		},

		methods: {
			billSubmitClick() {
				if (!this.bill.amount) {
					// 检查空值（包括 null、undefined、""）
					this.$modal.msgError("请输入金额");
					return;
				} else if (this.bill.amount <= 0) {
					this.$modal.msgError("请输入正确的金额");
					return;
				} else if (this.bill.amount > 5000) {
					// 新增：检查充值金额是否大于1000
					this.$modal.msgError("金额超过5000元");
					return;
				} else if (!this.bill.paymentMethod) {
					// 检查空值（包括 null、undefined、""）
					this.$modal.msgError("请选择充值方式");
					return;
				}
				addUserBill(this.bill).then(res => {
					console.log(res);
					this.$modal.msgSuccess("充值成功")
					uni.navigateBack({
						delta: 1 // 返回的页面数，1表示返回上一页
					});
				}).catch(err => {
					console.error('提交充值单失败:', err);
					// 错误处理逻辑
				});
			},

			payMethod(val) {
				this.bill.paymentMethod = val
				console.log(this.bill);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面容器样式 */
	.YmContent {
		background-color: #fff;
		/* 蓝色底色 */
		min-height: 100vh;
		/* 全屏高度 */
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 充值卡片容器 */
	.voucher_center__1 {
		background-color: #FFFFFF;
		/* 白色卡片 */
		border-radius: 16rpx;
		/* 圆角 */
		padding: 30rpx;
		margin-top: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
	}

	/* "充值金额" 标题 */
	.voucher_center__47 {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	/* 金额输入区域 */
	.voucher_center__48 {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EEE;
		padding-bottom: 10rpx;
		margin-bottom: 40rpx;
	}

	/* ￥ 符号 */
	.voucher_center__49 {
		font-size: 48rpx;
		color: #333;
		margin-right: 10rpx;
	}

	/* 输入框样式 */
	.money {
		flex: 1;
		font-size: 48rpx;
		height: 60rpx;
		color: #333;
	}

	/* 支付方式 radio-group */
	.payType {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		flex-wrap: wrap;
	}

	/* 微信支付选项 */
	.voucher_center__55 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.voucher_center__56 {
		font-size: 28rpx;
		color: #333;

	}

	.voucher_center__57 {
		margin-right: 40rpx;
	}

	/* 支付宝支付选项 */
	.voucher_center__58 {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.voucher_center__59 {
		font-size: 28rpx;
		color: #333;
	}

	/* 确认支付按钮 */
	.btSubmit {
		background-color: #07C160;
		/* 微信绿色 */
		color: #FFFFFF;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 20rpx;
	}

	/* 充值须知标题 */
	.voucher_center__22 {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	/* 充值须知内容 */
	.voucher_center__23 {
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
		display: block;
	}
</style>